<template>
	<view>
		<view class="com_item" v-for="(item, index) in comList" :key="item.id">
			<view class="left">
				<view class="img_wrapL">
					<image class="img" mode="aspectFit" :src="item.appIcon"></image>
				</view>
			</view>
			<view class="right">
				<view class="com_name">{{item.commentName}}</view>
				<view class="com_cont" @click="addRemant(item.id, item.commentName, index)">{{item.content}}</view>
				<view class="com_img_list">
					<view class="img_wrap"v-for="(itemSub, index) in item.listForumAccessoryVo" :key=itemSub.id>
						<image :src="itemSub.url" mode="aspectFill"></image>
					</view>
				</view>
				<view class="comment_num" v-if="item.remnant" @click="openChilCom(item.id, index)">有{{item.remnant}}条回复>>></view>
				<view class="bottom">
					<view class="b_l">
						<text class="tips">{{index + 1}}楼</text>
						<text class="tips">
							{{item.createTime}}
						</text>
					</view>
					<view class="b_r">
						<text class="icon" @click="addRemant(item.id, item.commentName, index)">
							<text class="uniicons">&#xe263;</text>
							<text class="num" v-if="item.remnant" >{{item.remnant}}</text>
						</text>
						<text class="icon" :class="[item.isPraise ? 'active' : '']">
							<text class="uniicons" @click="thumup(index, item.id)">&#xe83f;</text>
							<text class="num" v-if="item.praiseNum">{{item.praiseNum}}</text>
						</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name:"comment1",
		props:{
			parComList: {
				type: Array,
				default: []
			}
		},
		data() {
			return {
				comList: this.parComList
			};
		},
		watch:{
			parComList(val){
				this.comList = val
			},
		},
		methods:{
			//打开子集评论
			openChilCom(id, index) {
				let obj = {}
				obj.id = id
				obj.index = index
				this.$emit("openChilCom",obj)
			},
			//点赞
			thumup(index,id){
				this.$api.praiseComment(id).then(res=> {
					let data = res.data.data;
					this.comList[index].isPraise = data
					if(data){
						this.comList[index].praiseNum = this.comList[index].praiseNum + 1;
					}else{
						this.comList[index].praiseNum = this.comList[index].praiseNum - 1;
					}
				}).catch(()=> {})
			},
			//添加评论
			addRemant(id, name, index){
				let obj = {}
				obj.id = id;
				obj.name = name;
				obj.index = index;
				this.$emit("addComent",obj)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.com_item{padding: 20rpx 0 20rpx 100rpx;border-bottom: 1px solid #EEEEEE;position: relative;
		.left{position: absolute;left: 0;right: 0;width: 80rpx;
			.img_wrapL{height: 80rpx;width: 80rpx;overflow: hidden;border-radius: 50%;
				.img{width: 100%;height: 100%;}
			}
			
		}
		.com_name{font-size: 30rpx;color: #333333;font-weight: bold;margin-bottom: 14rpx;}
		.com_cont{font-size: 28rpx;color: #666666;margin-bottom: 10rpx;}
		.com_img_list{
			.img_wrap{width: 88%;margin-bottom: 10rpx;overflow: hidden;}
		}
		.comment_num{color: #F96363;font-size: 24rpx;margin-bottom: 10rpx;}
		.bottom{height: 50rpx;display: flex;justify-content: space-between;align-items: center;
			.b_l{font-size: 22rpx;color: #999999;
				.tips{margin-right: 20rpx;}
			}
			.b_r{padding:0 30rpx;display: flex;align-items: center;
				.icon{width: 100rpx;display: flex;align-items: center;justify-content: center; color: #333333;}
				.active{color:#F96363;}
				.num{font-size: 24rpx;margin-left: 8rpx;}
			}
		}
	}
</style>
